<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>风险详情</title>
    <link rel="stylesheet" href="../src/css/modal.css">
    <link rel="stylesheet" href="../src/css/index.css">
    <link rel="stylesheet" href="../src/css/loading.css">
    <script>
        (function setPageScale(window, document) {
            function setBodyScale() {
                var zoom = (window.innerHeight / 1080).toFixed(3)
                if (document.body) {
                    document.body.style.transform = 'translate(-50%, -50%) scale(' + zoom + ')';
                } else {
                    document.addEventListener('DOMContentLoaded', setBodyScale)
                }
            }
            setBodyScale();
            // reset scale unit on page resize窗口改变时候重新设置缩放
            window.addEventListener('resize', setBodyScale)
            window.addEventListener('pageshow', function (e) {
                if (e.persisted) {
                    setBodyScale()
                }
            })
        }(window, document))
    </script>
    <!--[if lt IE 9]> 
         <script src="../src/js/html5shiv.min.js"></script>
    <![endif]-->
</head>

<body>
    <div class="wrapper">

        <div class="global-content">
            <header class="header"> </header>
            <section class="main clearfix">
                <nav class="navs">
                    <div class="nav-item">
                        <a href="./cyzl.html" class="cyzl">
                            <span class="badge">2</span>
                            产业总览
                        </a>
                    </div>
                    <div class="nav-item">
                        <a href="javascript:;" class="tsgz on">
                            <span class="badge">2</span>
                            态势感知
                        </a>
                    </div>
                    <div class="nav-item">
                        <a href="./yjcz.html" class="yjcz">
                            <span class="badge">2</span>
                            预警处置
                        </a>
                    </div>

                </nav>
                <div class="content-box">
                    <div class="fxxq-wrapper">
                        <div class="a-tit">杭州市药品风险详情</div>
                        <div class="a-sub-tit">注：当前监测月：2019年9月，监测周期：2018年9月-2019年9月</div>
                        <a class="back-icon" href="javascript:window.history.go(-1);">
                            <img src="../src/img/back.png" alt="">
                        </a>
                        <div class="fxxq-con">
                            <div class="fxxq-con-left">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>分类</th>
                                            <th>指标</th>
                                            <th>监测值/基准值</th>
                                            <th>结果</th>
                                            <th>分值</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <th>1、静态风险</th>
                                            <td class="eli  left ">区域内存在疫苗、血液制品、注射剂</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>2</td>
                                        </tr>
                                        <tr>
                                            <th rowspan="6">2、监督检查</th>
                                            <td class="eli  left ">区域内存在疫苗、血液制品、注射剂</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>2</td>
                                        </tr>
                                        <tr>
                                            <td class="eli left">区域内存在疫苗、血液制品、注射剂</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>2</td>
                                        </tr>
                                        <tr>
                                            <td class="eli left">区域内存在疫苗、血液制品、注射剂</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>2</td>
                                        </tr>
                                        <tr>
                                            <td class="eli left">区域内存在疫苗、血液制品、注射剂</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>2</td>
                                        </tr>
                                        <tr>
                                            <td class="eli left">区域内存在疫苗、血液制品、注射剂</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>2</td>
                                        </tr>
                                        <tr>
                                            <td class="eli left">区域内存在疫苗、血液制品、注射剂</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>2</td>
                                        </tr>
                                        <tr>
                                            <th rowspan="2">3、抽样检验</th>
                                            <td class="eli left">区域内存在疫苗、血液制品、注射剂</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>2</td>
                                        </tr>
                                        <tr>
                                            <td class="eli left">区域内存在疫苗、血液制品、注射剂</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>2</td>
                                        </tr>
                                        <tr>
                                            <th rowspan="2">4、不良反应</th>
                                            <td class="eli left">区域内存在疫苗、血液制品、注射剂</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>2</td>
                                        </tr>
                                        <tr>
                                            <td class="eli left">区域内存在疫苗、血液制品、注射剂</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>2</td>
                                        </tr>
                                        <tr>
                                            <th>5、企业信用</th>
                                            <td class="eli left">区域内存在疫苗、血液制品、注射剂</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>2</td>
                                        </tr>
                                        <tr>
                                            <th>6、质量舆情</th>
                                            <td class="eli left">区域内存在疫苗、血液制品、注射剂</td>
                                            <td>固定值</td>
                                            <td>否</td>
                                            <td>2</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="fxxq-con-right">
                                <div class="fxxq-flex-item">
                                    <span class="name">本年度 </span>
                                    <span class="score">23</span>

                                </div>
                                <div class="fxxq-flex-item">
                                    <span class="name">本月度 </span>
                                    <span class="score">23</span>

                                </div>
                                <div class="radai" id="radar" style="width: 100%;height:460px;margin-top: 333px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <script src="../src/js/jquery.3.3.1.js"></script>
    <script src="../src/js/modal.min.js"></script>
    <script src="../src/js/echarts.js"></script>
    <script src="../src/js/loading.js"></script>
    <script>
        $(function () {
            // 加载显示测试  不需要可删除
            function loading1() {
                $('body').loading({ //加载区域元素id或则类名元素名 可以上任何元素类名id
                    loadingWidth: 240,
                    title: '请稍等!',
                    name: 'test', //
                    discription: '正在努力加载中...',
                    direction: 'column',
                    type: 'origin',
                    // originBg:'#71EA71',
                    originDivWidth: 40,
                    originDivHeight: 40,
                    originWidth: 6,
                    originHeight: 6,
                    smallLoading: false,
                    // loadingMaskBg: 'rgba(0,0,0,0.2)',
                    titleColor: '#52fffd',
                    // loadingBg: '#312923',
                    loadingMaskBg: 'rgba(22,22,22,0.3)'
                });
                setTimeout(function () {
                    removeLoading('test');
                    // 关闭加载
                }, 500);
            }
            loading1()
            showRadar()

        })

        // 雷达图
        function showRadar() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('radar'));
            // 指定图表的配置项和数据
            var labels = ['静态风险', '不良反应', '质量舆情', '企业信用', '抽样检验', '监督检查'];
            var option = {
                tooltip: {
                    formatter: function (params) {
                        var results = '';
                        for (var i = 0; i < labels.length; i++) {
                            results += labels[i] + ':' + params.value[i] + '%<br>';
                        }
                        return results;
                    }
                },
                radar: {
                    splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
                        show: true,
                        areaStyle: { // 分隔区域的样式设置。
                            color: ['rgba(14,49,145,1)',
                                'rgba(14,49,145,0)'
                            ], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
                        }
                    },
                    axisLine: { //指向外圈文本的分隔线样式
                        lineStyle: {
                            color: '#153269'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#031448', // 分隔线颜色
                            width: 1, // 分隔线线宽
                        }
                    },
                    name: {
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    indicator: [{
                            name: '静态风险',
                            max: 100

                        },
                        {
                            name: '不良反应',
                            max: 100
                        },
                        {
                            name: '质量舆情',
                            max: 100

                        },
                        {
                            name: '企业信用',
                            max: 100

                        },
                        {
                            name: '抽样检验',
                            max: 100

                        },
                        {
                            name: '监督检查',
                            max: 100

                        }
                    ]
                },
                series: [{
                    type: 'radar',
                    data: [{
                        value: [100, 100, 80, 30, 6.9, 90],
                    }, ],
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                color: '#ED5A0D',
                                // shadowColor: '#4A99FF',
                                // shadowBlur: 10,
                            },
                            shadowColor: '#ED5A0D',
                            shadowBlur: 10,
                        },
                    },

                    areaStyle: {
                        normal: { // 单项区域填充样式
                            color: {
                                type: 'linear',
                                x: 0, //右
                                y: 0, //下
                                x2: 1, //左
                                y2: 1, //上
                                colorStops: [{
                                    offset: 0,
                                    color: '#ED5A0D'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(237,90,13,.2)'
                                }, {
                                    offset: 1,
                                    color: '#ED5A0D'
                                }],
                                globalCoord: false
                            },
                            opacity: 1 // 区域透明度
                        }
                    }
                }],
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    </script>

</body>

</html>